import React from 'react';
import { Icon, Modal } from 'antd';
import { browserHistory } from 'react-router';
import * as actions from './../../actions/frontEnd/homeAction';

export default class myFavorites extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          serviceData: []
        }
    }
    componentDidMount(){
        actions.findFollowProducts(this);
    }
    gotoProductDetail(id){
        browserHistory.push("/productDetail/" + id);
    }
    weatherFollow(pId, e){
        var that = this;
        e.stopPropagation();
        Modal.confirm({
          title: "提示：",
          content: "你确定要取消 此商品 关注吗？",
          onOk: function(){
            actions.weatherFollow(that, pId, "unFollow", true);
          }
        });
    }
    renderItem(item, index) {
        var productPic = null;
        if(item.productPic == undefined){
          productPic = <img src="/src/styles/images/listDefault_Large.png" width="225" height="300" />
        }else {
          productPic = <img src={"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.productPic} width="225" height="300" />
        }

        return (<li className="pop_deal_single" key={index} onClick={this.gotoProductDetail.bind(this, item.id)}>
          <Icon type="close-circle" className="iconClose" onClick={this.weatherFollow.bind(this, item.id)}/>
          <div className="pic pic_hover">
            {productPic}
          </div>
          <div className="pop_deal_content">
            <p className="brand_name" title={item.productName + ((item.brandName)?"("+ item.brandName + ")":"")}>{item.productName + ((item.brandName)?"("+ item.brandName + ")":"")}</p>
            <a href="http://item.jumei.com/df1804256771280p4229988.html?from=kdn_0321p_pos_1_11&amp;status=zs" target="_blank" className="name_box" height="35">
              <span className="name" title={item.title}>{item.title}</span>
              <span className="saleinfos"></span>
            </a>
            <a href="http://item.jumei.com/df1804256771280p4229988.html?from=kdn_0321p_pos_1_11&amp;status=zs" target="_blank" className="zhe_box">
              <span className="num01">
                <em>Rm</em>{item.discountPrice}</span><span className="num02">Rm{item.price}
              </span>
            </a>
          </div>
        </li>);
    }
    render() {
      var serverList = null;
      if(this.state.serviceData.length != 0){
          serverList = <ul className="act_product_ul" style={{marginBottom: '20px', display: 'flex', width: '1070px', marginTop: '32px'}}>
            {
                this.state.serviceData.map((item, index) => {
                    return this.renderItem(item, index);
                })
            }
          </ul>
      }else{
          serverList = <div className="divEmptyData" style={{marginLeft: 'auto', marginRight: 'auto', width: '1070px', marginTop: '32px'}}>对不起，没有相关收藏。</div>
      }
      return (
        <div>
          {serverList}
        </div>
      )
    }
}
